<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=yes" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta
      name="description"
      content="A JavaScript library, written in TypeScript, to convert among different color models"
    />
  </head>
  <body>
    <header class="separator">
      <a
        href="https://github.com/elchininet/ColorTranslator"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img class="logo" src="<%= htmlWebpackPlugin.options.logo %>" />
      </a>
    </header>
    <div class="github-buttons">
      <a
        class="github-button"
        href="https://github.com/elchininet/ColorTranslator/archive/master.zip"
        data-icon="octicon-cloud-download"
        data-size="large"
        aria-label="Download elchininet/ColorTranslator on GitHub"
        >Download</a
      >
      <a
        class="github-button"
        href="https://github.com/elchininet/ColorTranslator/fork"
        data-icon="octicon-repo-forked"
        data-size="large"
        aria-label="Fork elchininet/ColorTranslator on GitHub"
        >Fork</a
      >
      <a
        class="github-button"
        href="https://github.com/elchininet/ColorTranslator"
        data-icon="octicon-star"
        data-size="large"
        aria-label="Star elchininet/ColorTranslator on GitHub"
        >Star</a
      >
    </div>
    <h3>Modifing color saturation and luminance</h3>
    <div id="demo1" role="presentation" class="demo demo-square separator"></div>

    <h3>Modifing color hue</h3>
    <div id="demo2" role="presentation" class="demo demo-square-half separator"></div>

    <h3>Wiphala modifying color hue</h3>
    <div id="demo3" role="presentation" class="demo demo-square separator"></div>

    <h3>Desaturating primary colors</h3>
    <div id="demo4" role="presentation" class="demo demo-square separator"></div>

    <h3>Blending between two colors</h3>
    <div id="demo5" role="presentation" class="demo demo-square separator"></div>

    <h3>Shades and tints of a color</h3>
    <div id="demo6" role="presentation" class="demo demo-square separator"></div>
    
    <h3>Mixing colors in additive mode</h3>
    <div id="demo7" role="presentation" class="demo demo-square separator"></div>

    <h3>Mixing colors in subtractive mode</h3>
    <div id="demo8" role="presentation" class="demo demo-square separator"></div>

    <h3>Additive Color Harmonies</h3>
    <div id="demo9" role="presentation" class="demo demo-square separator"></div>

    <h3>Subtractive Color Harmonies</h3>
    <div id="demo10" role="presentation" class="demo demo-square separator"></div>
    
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>
